<template>
  <div class="details">
    <!-- 详情页 -->
    <i class="iconfont icon-zuo" @click="Return"></i>
    <div class="details-main">
      <div class="header-box">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" @change="onChange" ref="swiper">
          <van-swipe-item v-for="(item,index) in detaillist" :key="index">
            <img :src="item.img" alt />
          </van-swipe-item>
          <van-swipe-item>
            <img
              src="https://img2.baidu.com/it/u=2978362790,3881296876&fm=26&fmt=auto&gp=0.jpg"
              alt
            />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/4</div>
          </template>
        </van-swipe>
        <!-- <div class="vantBtn">
        <button @click="prev()">prev</button>
        <button @click="next()">next</button>
        </div>-->
      </div>
      <ul class="detail-first" v-for="(item,index) in detaillist" :key="index">
        <li>
          <b>{{item.listingTitle}}</b>
          <p></p>
          <p>均价:{{item.sellingprice}}/㎡</p>
        </li>
        <li>
          <span>
            <b>{{item.floor}}套</b>
            <p>二手房源</p>
          </span>
          <span>
            <b>{{item.lase}}套</b>
            <p>出租房源</p>
          </span>
          <span>
            <b>{{item.recently}}套</b>
            <p>最近成交</p>
          </span>
        </li>
      </ul>
      <div class="details-header">
        <ul v-for="(item,index) in detaillist" :key="index">
          <li>
            <b>基本信息:</b>
          </li>
          <li>建筑年代：{{item.pv}}</li>
          <li>地址：{{item.area}}</li>
          <li>物业公司：{{item.contacts}}</li>
        </ul>
      </div>
      <div class="detail-nav0">
        <p>周边配套及配套</p>
        <ul>
          <li
            v-for="(item,index) in Search"
            :key="index"
            @click="handleClick(item,index)"
            :class="active === index ? 'active' : ''"
          >{{item}}</li>
        </ul>
      </div>

      <div class="detail-nav1">
        <baidu-map class="map" :center="{lng: nearby.center.lng, lat:nearby.center.lat}" :zoom="10">
          <bm-marker
            v-for="(item,index) in cityList"
            :key="index"
            :position="{lng: item.longitude, lat:item.latitude}"
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
          >
            <bm-label
              :content="item.name"
              :position="{lng: item.longitude, lat:item.latitude}"
              :offset="{width: -35, height: 30}"
            />
            <bm-view class="map"></bm-view>
            <bm-local-search
              :keyword="keyword"
              :nearby="nearby"
              :auto-viewport="true"
              :panel="false"
            ></bm-local-search>
            <bm-circle :center="nearby.center" :radius="nearby.radius"></bm-circle>
          </bm-marker>
        </baidu-map>
      </div>
      <div class="nav2">
        <b>小区二手房</b>
        <dl v-for="(item,index) in detaillist" :key="index">
          <dt>
            <img :src="item.img" alt />
          </dt>
          <dd>
            <p>{{item.listingTitle}}</p>
            <p>{{item.area}}</p>
            <p>{{item.sellingprice}}/套</p>
            <p class="lastp">
              <span>{{item.fitment}}</span>
              <span>{{item.fitmentType}}</span>
              <span>{{item.housetype}}</span>
            </p>
          </dd>
        </dl>
      </div>
      <div class="nav3">
        <b>小区出租</b>
        <dl v-for="(item,index) in getoldhomeList" :key="index">
          <dt>
            <img :src="item.img" alt />
          </dt>
          <dd>
            <p class="p1">
              <span>{{item.state}}</span>
              <b>{{item.listingTitle}}</b>
            </p>
            <p class="p2">
              <span>{{item.detailAddress}}</span>|
              <span>建面:{{item.houseArea}}</span>
            </p>
            <p class="p3">
              <span>{{item.sellingprice}}元/㎡</span>
            </p>
            <p class="p4">
              <span class="span1">{{item.fitment}}</span>
              <span>{{item.stateType}}</span>
              <span>{{item.fitmentType}}</span>
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getHomeDetail,
  getoldhome,
  getRecommend,
  getCity,
  getCityList
} from "@/api/index.js";
export default {
  data() {
    return {
      active: 0,
      current: 0,
      detaillist: [],
      cityList: [],
      getoldhomeList: [],
      // active: 2
      Search: ["交通", "医院", "教育", "生活", "娱乐"],
      nearby: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 1000
      },
      keyword: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.area = this.$route.query.area;
    this.getHomeDetail(this.id);
    this.getoldhome();
    this.getCity();
  },
  methods: {
    prev() {
      this.$refs.swiper.prev();
    },
    next() {
      this.$refs.swiper.next();
    },
    //轮播总个数
    onChange(index) {
      this.current = index;
    },
    //渲染列表数据
    getHomeDetail() {
      getHomeDetail(this.id).then(res => {
        this.detaillist = res.data.data;
        console.log(res);
      });
    },
    //推荐数据
    getoldhome() {
      getoldhome({ classifyType: this.active }).then(res => {
        this.getoldhomeList = res.data.data;
      });
    },
    getCity() {
      getCity({ name: this.area }).then(res => {
        this.cityList = res.data.data;
        console.log(res);
        this.nearby.center.lng = res.data.data[0].longitude;
        this.nearby.center.lat = res.data.data[0].latitude;
      });
    },
    Return() {
      this.$router.go("-1");
    },
    handleClick(item, index) {
      this.active = index;
      this.keyword = item;
      // console.log(item, index);
    },
    goOff() {
      this.$router.go(-1);
    }
  }
};
</script>
<style>
.details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(240, 239, 239);
}
.icon-zuo {
  padding: 10px;
  background: #fff;
  /* position: sticky; */
  /* background: rgba(0, 0, 0, 0.1); */
  /* font-size: 24px; */
  /* position: absolute;
  top: 0;
  left: 10px; */
}
.details-main {
  flex: 1;
  overflow-y: scroll;
}
.detail-first {
  width: 100%;
  padding: 0 15px;
  background: #fff;
}
.detail-first > li:first-child {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 20px 0;
}
.detail-first > li:nth-child(2) {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}
.detail-first > li:nth-child(2) > span {
  text-align: center;
}
.details-header {
  background: #fff;
  margin: 20px 0;
  padding: 0 15px;
}
.details-header > ul > li {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.my-swipe .van-swipe-item > img {
  width: 100%;
  height: 200px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.my-swipe {
  position: relative;
}

.detail-nav1 {
  width: 100%;
  height: 40%;
  margin-bottom: 20px;
  background: #fff;
}
.detail-nav0 {
  background: #fff;
}
.detail-nav0 > p {
  padding: 10px 15px;
}
.detail-nav0 > ul {
  display: flex;
  padding-bottom: 10px;
}
.detail-nav0 > ul > li {
  margin: 0 10px;
  padding: 2px 10px;
  border: 1px solid #ccc;
  /* background: #fff; */
  border-radius: 15px;
}
.nav2 {
  background: #fff;
  padding: 0 15px;
}
.nav2 > p {
  padding: 15px 0;
}
.nav3 {
  background: #fff;
  padding: 0 15px;
}
.nav3 > p {
  padding: 15px 0;
}
dl {
  display: flex;
  padding: 0 15px;
}
dl > dt {
  margin-right: 15px;
}
dl > dt > img {
  width: 100px;
  height: 100px;
}
.p1 > span {
  background: #ccc;
  margin-right: 5px;
  margin-right: 5px;
}
.p2 {
  margin: 5px 0;
}
.p2 > span {
  border: none;
  margin-right: 5px;
}
.p3 {
  margin-bottom: 5px;
}
.p3 > span {
  border: none;
}
.active {
  background: rgb(240, 239, 239);
  /* background: #ccc; */
  /* color: red; */
}
</style>